前言

這個情境是指，當我們開發一個專案時，程式碼愈寫愈多，整個應用程式的規模愈來愈大時，那又如果我們都把全部的 JS 程式碼都集中在一個檔案時，會造成維護及閱讀上的困難，這樣的狀況是很糟糕的。
好在 ES6 開始支援模組，使得標準的 JavaScript 也可以使用這個功能，接下來就會針對 Import 與 Export 的語法來說明如何使用。

模組的基本知識

先來看以下的基本範例，我們簡單的宣告了一個 boxArea 常數，用意是要計算盒子的面積。然後，要從外部存取 boxArea 這個模組，我們便要加上 export 這個關鍵字。

// exportBoxArea.js

const boxArea = (width) => {
  return width * width;
}

export default boxArea;

如範例一定義好的模組可用下面的範例二存取。這裡 import 的功能就是以檔案定義的模組程式。

import boxArea from './exportBoxArea' // exportBoxArea.js 的 .js 可以省略

console.log(boxArea(10)) // 可以得到盒子面積為 100

import 指令的各種語法介紹

在這裡要說明 import 這個指令，在依實際撰寫程式碼不同的情境下，就會產生各種的寫法，以下將簡單介紹。

載入整個模組

使用星號 * 可以來載入該模組內的全部方法，但必須使用 as 來另外為該模組定義另外的名稱。

// 將 boxArea 模組定義為 math

import * as math from './exportBoxArea'

console.log(boxArea(7)) // 可以得到盒子面積為 49

給予模組內的各個方法另外的名稱

同樣的該模組如果有多個方法，我們也可以每個方法給予另外的名稱。

// moduleSample.js

const boxArea = (width) => {
  return width * width;
}

const triangleArea = (width, height) => {
  return width * height / 2;
}

// math.js
import { boxArea as MathBox, triangleArea as MathTriangl } from './moduleSample'

console.log(MathBox(10)); // 會得到盒子面積為 100
console.log(MathTriangl(5, 20)); // 會得到三角形面積為 50